<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Document</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/searchCurriculum.css">
  <link rel="stylesheet" href="css/iconfont.css">
</head>

<body>
  <div class="container">
    <header>
      <div class="header-return" id="toreturn">
        <i class="iconfont">&#xe600;</i>
      </div>
      <div class="header-search">
        <i class="iconfont">&#xe682;</i>
        <form action="" id="goSearch" onsubmit="return false">
          <input type="search" autocapitalize="off" placeholder="搜索课程名称或者关键字">
        </form>
      </div>
    </header>
    <section>
      <ul>

      </ul>
    </section>

  </div>
  <script src="./js/flexible.js"></script>
  <script src="./js/zepto.min.js"></script>
  <script src="./js/zepto.touch.js"></script>
  <script src="./js/lazyload.min.js"></script>
  <script>
    $(function () {
      // 接受传过来的路径值
      // console.log(window.location.hash);
      var getTitle = window.location.hash.replace(/#/, '')
      //当前页
      var pages = 1;
      //当前页的数量
      var sizes = 4;
      // 页面数据
      var result = '';
      // 返回上一页
      $('#toreturn').tap(function () {
        window.history.go(-1)
      })

      // 运行请求
      fAjax(pages)

      // 滚动条事件
      $('section').scroll(function () {
        // 滚动距离
        var scrollTop = $(this).scrollTop()
        // section当前可视区域高度
        var cilentHeight = $(this).height()
        // section整个的高度
        var height = $('section ul').height()
        if (height <= scrollTop + cilentHeight) {
          pages++;
          fAjax(pages++);
        }
      })

      // 键盘事件
      $('#goSearch').on('keypress', function (e) {
        var keycode = e.keyCode;
        var val = $(this).find('input').val();

        // 点击了搜索按钮
        if (keycode == '13') {
          pages = 1;
          result = '';
          fAjax(pages, val);
          document.activeElement.blur();
        }
      })

      // 点击空白处，收起键盘
      window.addEventListener('touchstart', function () {
        document.activeElement.blur();
      }, false)

      // 请求ajax函数
      function fAjax(pages, val) {
        // 判断不同接口的data ==》 key
        var searchName = getTitle == 'apps' ? 'appname' : 'name';
        $.ajax({
          url: 'http://39.101.217.150:8075/' + getTitle + '/list',
          data: {
            page: pages,
            size: sizes,
            [searchName]: val
          },
          success: function (data) {
            var records = data.data.records
            if (records.length) {
              $.each(records, function (index, item) {
                result += `
              <li>
                  <div class="img">
                    <img data-original="./img/uni.jpg" alt="" src="./img/loading.jpg">
                  </div>
                  <div class="text">
                    <h4 class="text-overflow">XXX</h4>
                    <p class="text-overflow ">${item.content || item.courseContent}</p>
                    <a href="${item.appUrl || item.courseUrl}">立即学习</a>
                  </div>
                </li>
               <li>
                  <div class="img">
                    <img data-original="${item.imgUrl || item.imgurl}" alt="" src="./img/loading.jpg">
                  </div>
                  <div class="text">
                    <h4 class="text-overflow">${item.appName || item.contentName}</h4>
                    <p class="text-overflow ">${item.content || item.courseContent}</p>
                    <a href="${item.appUrl || item.courseUrl}">立即学习</a>
                  </div>
                </li>
               `;
              });
              // 添加内容
              $('section ul').html(result)
              // 懒加载
              $('section ul li img').lazyload({
                threshold: 200,
                container: $('section')
              })
            }
          }
        })
      }
    })
  </script>
</body>

</html>